<template>
    <li 
     :class="['tab-item', {current: index === tabIndex}]"
     @click="onTabClick"
    >
     {{data.field_name}}
    </li>
</template>

<script>
import { scrollToPosition } from 'utils/tools.js'

export default {
  name: 'TabItem',
  props: {
      data: Object,
      index: Number,
      tabIndex: Number
  },

  methods: {
      onTabClick (field, index) {
          //console.log(arguments);
        //   被抽离出去了，所以注释了  
        //   const target = arguments[0].target,//li
        //         offsetLeft = target.offsetLeft,
        //         scrollEl = target.parentNode.parentNode;//li -> ul.tab-list -> div.tab-wrapper
        //   scrollEl.scrollTo(offsetLeft, 0);//将每次点击的那个li的offsetLeft给div.tab-wrapper去scrollTo,这样就能实现每次点击的li元素在靠屏幕最左边

          scrollToPosition(arguments[0].target);

          this.$emit('onTabClick', field, index);
      },
  }
}
</script>

<style lang="scss" scoped>
  .tab-item {
      float: left;
      width: 1.2rem;
      height: 100%;
      font-size: .14rem;
      text-align: center;
      line-height: .35rem;

      &.current {
          color: #23b8ff;
          border-bottom: 2px solid #23b8ff;
      }

  }

</style>